<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Socket</title>
<script type="text/javascript"
	src="${ctxstatic}/js/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

	var websocket;

	//如果浏览器支持WebSocket
	if (window.WebSocket) {
		websocket = new WebSocket(
				"ws://localhost:8989/ws?userid=${userid}&roomid=${roomid}&position=${position}"); //获得WebSocket对象

		//当有消息过来的时候触发
		websocket.onmessage = function(event) {
			var respMessage = document.getElementById("respMessage");
			respMessage.value = respMessage.value + "\n" + event.data;

			result(event.data);
		}
				
		//连接打开的时候触发
		websocket.onopen = function(event) {
			var respMessage = document.getElementById("respMessage");
			respMessage.value = "建立连接";
		}

		//连接关闭的时候触发
		websocket.onclose = function(event) {
			var respMessage = document.getElementById("respMessage");
			respMessage.value = respMessage.value + "\n断开连接";
		}
		
		websocket.onerror = function () {
			var respMessage = document.getElementById("respMessage");
			respMessage.value = respMessage.value + "\n连接异常";
		};

		
	} else {
		alert("浏览器不支持WebSocket");
	}

	function sendMsg(msg) { //发送消息 
	// 		alert(msg)
		if (window.WebSocket) {
			if (websocket.readyState == WebSocket.OPEN) { //如果WebSocket是打开状态
				websocket.send(msg); //send()发送消息
			}
		} else {
			return;
		}
	}

	function result(result) { //返回data
		result = jQuery.parseJSON(result);
		// 		alert(result.method+"|"+result.success+"|"+result.code+"|"+result.msg);
		var data = result.data;
		var method = result.method;
		// 		alert(data);
		if (method == 'start') {
			startResult(data);
		} else if (method == 'play') {
			playResult(data);
		}

	}

	var majiang;

	function start() { //开始 
		var msg = "{\"method\":\"start\",\"roomid\":\"${roomid}\"}";
		sendMsg(msg);
	}

	function startResult(data) { //开始 
		majiang = data;
		var trmj = "";
		$
				.each(
						data,
						function(n, value) {
							trmj += '<td>'
									+ value
									+ '<br><input type="button" onclick="play(this);" value="出"></td>';
						});
		$("#trmj").html(trmj);
	}

	function play(t) { //出牌
		var td = $(t).parent();
		var mj = td.text();
		var msg = "{\"method\":\"play\",\"roomid\":\"${roomid}\",\"position\":\"${position}\",\"mj\":\""
				+ mj + "\"}";
		sendMsg(msg);
	}

	function playResult(data) { //出牌
		var mj = data.mj;
		var position = data.position;

		playpeng(mj, position);
		playchi(mj, position);

	}

	function playpeng(mj, position) { //出牌
		var dui = 0;
		$.each(majiang, function(n, value) {
			if (mj == value) {
				dui++;
			}
		});
		if (dui == 2) {
			msgResult("碰");
		}
		if (dui == 3) {
			msgResult("杠");
		}
	}

	function playchi(mj, position) { //出牌

		var p1 = position - 0;
		var p2 = $
		{
			position
		}
		-0;
		if (p1 == 4) {
			p1 = 1;
		} else {
			p1 = p1 + 1
		}
		if (p1 != p2) {
			return;
		}
		var mjarray = mj.split("|");

		var m = (mjarray[0] - 0);
		var j = "|" + mjarray[1];
		var mj1;
		var mj2;
		mj1 = (m - 1) + j;
		mj2 = (m + 1) + j;
		chi(mj1, mj2);
		mj1 = (m - 2) + j;
		mj2 = (m - 1) + j;
		chi(mj1, mj2);
		mj1 = (m + 1) + j;
		mj2 = (m + 2) + j;
		chi(mj1, mj2);
	}

	function chi(mj1, mj2) { //出牌
		if (mj1 <= 0) {
			return;
		}
		if (mj2 > 9) {
			return;
		}

		var cha1 = 0;
		var cha2 = 0;
		$.each(majiang, function(n, value) {
			if (mj1 == value) {
				cha1++;
			}
			if (mj2 == value) {
				cha2++;
			}
		});
		if (cha1 >= 1 && cha2 >= 1) {
			msgResult("吃");
		}
	}

	function msgResult(msg) { //开始 
		var respMessage = document.getElementById("respMessage");
		respMessage.value = respMessage.value + "\n" + msg;
		if ("碰") {

		}

		var bun = "";
		bun = '<td><br><input type="button" onclick="play(this);" value="'
				+ msg + '"></td>';
		$("#bun").html($("#bun").html() + bun);
	}
</script>
</head>
<body>

	<table border="2">
		<tr id="trmj">
		</tr>
	</table>

	<table border="2">
		<tr>
			<td><input type="button"
				onclick='sendMsg("{\"cammand\":\"1\",\"roomid\":\"${roomid}\",\"userid\":\"${userid}\"}")'
				value="cccc"></td>
			<td><input type="button"
				onclick='sendMsg("{\"roomid\":\"${roomid}\",\"method\":\"getmajiang\"}")'
				value="获取所有牌"></td>
			<td><input type="button"
				onclick='sendMsg("{\"roomid\":\"${roomid}\",\"method\":\"setmajiang\"}")'
				value="洗牌"></td>
			<td><input type="button"
				onclick='sendMsg("{\"method\":\"start\",\"roomid\":\"${roomid}\"}")'
				value="开始"></td>
			<td><input type="button"
				onclick='sendMsg("{\"method\":\"queuemajiang\",\"roomid\":\"${roomid}\",\"userid\":\"${userid}\",\"position\":\"${position}\"}")'
				value="抓牌"></td>
		</tr>
	</table>
	<table border="2">
		<tr id="bun">
		</tr>
	</table>


	<form onsubmit="return false">
		<br>
		<h3>信息</h3>
		<textarea style="width: 1800px; height: 500px;" id="respMessage"></textarea>
		<input type="button" value="清空"
			onclick="javascript:document.getElementById('respMessage').value = ''">
	</form>
</body>
</html>